<section class="topbar top-head js-topbar">
    <div class="logo-wrapper">
        <div class="logo-full sprite-fm-illustration-wide mega-logo-dark"></div>
        <a class="logo">
            <i class="sprite-fm-uni icon-mega-logo"></i>
        </a>
        <div class="top-business-title">
            <span class="rtl-block-if-rtl">[$19530]</span>
        </div>
        <button class="mega-button individual hidden">
            <span class="rtl-block-if-rtl">[$19529]</span>
        </button>
        <button class="btn-icon show-hints hidden">
            <div>
                <i class="sprite-fm-uni icon-question"></i>
            </div>
        </button>
    </div>

    <div class="searcher-wrapper"></div>

    <i class="fmdb-loader sprite-fm-uni icon-loading icon24"></i>

    <div id="top-promo-btns"></div>

    <div class="topbar-links">
        <div class="btn-icon top-change-language js-top-buttons hidden">
            <i class="sprite-fm-mono icon-languages icon24"></i>
            <div class="dark-tooltip top">[$670]</div>
            <span class="top-change-language-name">[$1436]</span>
        </div>
        <hr>
    </div>

    <div class="top-buttons">
        <button class="mega-button branded-red create-account-button hidden">
            <span>
                [$968]
            </span>
        </button>
        <button class="mega-button top-login-button hidden">
            <span>[$171]</span>
        </button>
    </div>

    <div class="top-buttons business">
        <button class="mega-button branded-red create-account-button business-reg hidden">
            <span class="rtl-block-if-rtl">[$19517]</span>
        </button>
        <button class="mega-button top-login-button hidden">
            <span class="rtl-block-if-rtl">[$171]</span>
        </button>
    </div>

    <div class="topbar-links" id="header-account-states-popups">
        <button class="btn-icon js-pass-reminder js-top-buttons hidden">
            <i class="sprite-fm-uni icon-ekr"></i>
            <div class="dark-tooltip top">[$16901]</div>
        </button>
        <div class="dropdown js-dropdown-ephemeral js-dropdown-warning hidden">
            <button class="btn-icon js-top-buttons">
                <i class="sprite-fm-uni icon-history"></i>
                <div class="dark-tooltip top">[$8643]</div>
            </button>
            <div class="dropdown body popup ephemeral-session dropdown-content dropdown-arrow">

                <div class="top-warning-popup ephemeral-session">
                    <div class="warning-popup-body">
                        <div class="warning-header">[$8643]</div>
                        <div class="description">[$8644]</div>
                    </div>
                    <div class="fm-notifications-bottom">
                        <button class="mega-button positive warning-button">
                            <span>[$779]</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-overquota js-dropdown-warning hidden">
            <button class="btn-icon js-top-buttons">
                <i class="sprite-fm-uni icon-transfer-full-meter"></i>
                <div class="dark-tooltip top">[$1010]</div>
            </button>
            <div class="dropdown body popup over-quota dropdown-content dropdown-arrow">
                <div class="top-warning-popup over-quota">
                    <div class="warning-popup-body">
                        <div class="warning-header">[$1010]</div>
                        [$5929]
                        <p class="description">[$5931]</p>
                    </div>
                    <div class="fm-notifications-bottom">
                        <button class="mega-button positive warning-button">
                            <span>[$5549]</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-accountlink js-dropdown-warning hidden">
            <button class="btn-icon js-top-buttons">
                <i class="sprite-fm-uni icon-email"></i>
                <div class="dark-tooltip top">[$1585]</div>
            </button>
            <div class="dropdown body popup non-activated-account dropdown-content dropdown-arrow">
                <div class="top-warning-popup non-activated-account">
                    <div class="warning-popup-body">
                        <div class="mailbox-icon sprite-fm-illustration img-topbar-email-registration"></div>
                        [$5847]
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-astropay js-dropdown-warning hidden">
            <button class="btn-icon js-top-buttons">
                <i class="sprite-fm-uni icon-plan-expiry"></i>
                <div class="dark-tooltip top">[$8651]</div>
            </button>
            <div class="dropdown body popup astropay-payment-reminder dropdown-content dropdown-arrow">
                <div class="top-warning-popup astropay-payment-reminder">
                    <div class="warning-popup-body">
                        <div class="left-block">
                            <div class="plan-icon alarm">
                                <i class="pro1 sprite-fm-uni icon-crests-pro-1-details"></i>
                                <i class="pro2 sprite-fm-uni icon-crests-pro-2-details"></i>
                                <i class="pro3 sprite-fm-uni icon-crests-pro-3-details"></i>
                                <i class="pro4 sprite-fm-uni icon-crests-lite-details"></i>
                                <i class="pro101 sprite-fm-uni icon-crests-pro-flexi-details"></i>
                            </div>
                        </div>
                        <div class="right-block">
                            <div class="warning-header">[$8651]</div>
                            <div class="last-payment-info">
                                <span class="purchased-label">[$8652]</span>
                                <span class="purchased-date">yyyy-mm-dd</span>
                                <span class="expired-label">[$8657]</span>
                                <span class="expired-date">yyyy-mm-dd</span>
                            </div>
                            <div class="first-message">[$8653]</div>
                            <div class="second-message">[$8654]</div>
                            <div class="confirm-reason hidden">
                                <label>[$8685]</label>
                                <textarea class="confirm-reason-message" placeholder="[$8525]"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="fm-notifications-bottom">
                        <div class="plan-expired-checkbox-wrapper">
                            <div class="plan-expired-checkbox checkboxOff"></div>
                            <label class="plan-expired-checkbox-label radio-txt">[$229]</label>
                        </div>
                        <button class="mega-button warning-button close disabled hidden">
                            <span>[$8684]</span>
                        </button>
                        <button class="mega-button warning-button choose">
                            <span>[$8656]</span>
                        </button>
                        <button class="mega-button positive warning-button renew">
                            <span>[$8655]</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-siteupdate js-dropdown-warning hidden">
            <button class="btn-icon js-top-buttons">
                <i class="sprite-fm-uni icon-takedown"></i>
                <div class="dark-tooltip top">[$707]</div>
            </button>
            <div class="dropdown body popup site-update-available dropdown-content dropdown-arrow">
                <div class="top-warning-popup site-update-available">
                    <div class="warning-popup-body">

                            <div class="warning-header">
                                <div class="warning-icon sprite-fm-uni icon-mega-logo"></div>
                                <div>[$8850]</div>
                            </div>
                            <div class="release-info">
                                [$8851]
                            </div>
                            <p class="description">
                                [$8852]<br>
                                <br>
                                [$15536]
                            </p>

                    </div>
                    <div class="fm-notifications-bottom">
                        <button class="mega-button warning-button dont-update">
                            <span>[$148]</span>
                        </button>
                        <button class="mega-button positive warning-button update">
                            <span>[$707]</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-rewind-progress hidden">
            <div class="dropdown body popup dropdown-content dropdown-arrow js-topbar-rewind-progress rewind-progress">
                <div class="content">
                    <i class="sprite-fm-mono icon-sync in-progress rotating-animation"></i>
                    <div class="text">
                        <div class="title"></div>
                        <div class="message"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown js-dropdown-notification hidden">
            <button class="btn-icon notification js-topbarnotification js-top-buttons">
                <i class="sprite-fm-theme icon-notifications"></i><span class="js-notification-num icon-badge">99+</span>
                <div class="dark-tooltip top">[$862]</div>
            </button>
            <div class="dropdown body popup notification-popup dropdown-content dropdown-arrow">
                <div class="js-notification-popup notification-popup loading">
                    <div class="notification-header">
                        <div class="notification-txt">[$862]</div>
                    </div>
                    <div class="notification-scroll">
                        <div class="notification-scr-list">
                            <div class="item-type-icon-90 icon-folder-public-90 file-request-notification template hidden"></div>
                            <a class="notification-item template">
                                <span class="notification-status-icon">
                                    <span class="notification-status"></span>
                                    <span class="notification-avatar hidden">
                                        <span class="notification-avatar-icon">
                                            <i class="plus sprite-fm-mono icon-add-small"></i>
                                            <i class="minus sprite-fm-mono icon-disabled-filled"></i>
                                            <i class="cross sprite-fm-mono icon-remove"></i>
                                            <i class="exclamation sprite-fm-mono icon-exclamation-filled"></i>
                                            <i class="contact sprite-fm-mono icon-user-circle-filled"></i>
                                            <i class="camera sprite-fm-mono icon-meeting-notification"></i>
                                        </span>
                                    </span>
                                    <span class="notification-icon hidden">
                                        <i class="sprite-fm-uni icon-payment payment-icon"></i>
                                        <i class="sprite-fm-uni icon-check-circle reinstated-icon"></i>
                                        <i class="sprite-fm-uni icon-takedown takedown-icon"></i>
                                        <i class="sprite-fm-uni icon-mega-logo dynamic-icon"></i>
                                    </span>
                                    <span class="notification-type">
                                        <span class="notification-content">
                                            <span class="notification-promo hidden">
                                                <span class="promo-text">[$notif_limited_time_offer]</span>
                                                <span class="promo-icon">[$notif_promo]</span>
                                            </span>
                                            <span class="notification-username"></span>
                                            <span class="notification-info"></span>
                                        </span>
                                        <img class="hidden dynamic-image" />
                                        <span class="notification-request-buttons hidden">
                                            <button class="mega-button notifications-button accept">
                                                <span>[$5856]</span>
                                            </button>
                                        </span>
                                        <span class="cta-buttons hidden">
                                            <button class="mega-button notifications-button">
                                                <span></span>
                                            </button>
                                        </span>
                                        <span class="notification-scheduled-body hidden">
                                            <span class="notification-scheduled-title hidden"></span>
                                            <span class="notification-scheduled-prev hidden">
                                                <s></s>
                                            </span>
                                            <span class="notification-scheduled-occurrence hidden"></span>
                                        </span>
                                        <span class="notification-date"></span>
                                        <span class="notification-accepted-bl">
                                            <span class="notification-accepted">[$7375]</span>
                                        </span>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="fm-notifications-bottom">
                        <button class="mega-button action settings">
                            <span>[$823]</span>
                    </button>
                    </div>
                    <div class="notification-popup-loading">
                        <div class="notification-loading-icon sprite-fm-mono icon-notification-filled"></div>
                        <div class="notification-popup-loading-txt">
                            <span>[$1456]</span>
                            <i class="notification-loading-spinner sprite-fm-theme icon-loading-spinner"></i>
                        </div>
                    </div>
                    <div class="notification-popup-empty">
                        <div class="notification-empty-icon sprite-fm-mono icon-notification-off-filled"></div>
                        <div class="notification-popup-empty-txt">[$8589]</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dropdown account js-dropdown-account">
            <button class="btn-icon js-topbaravatar">
                <div class="avatar"></div>
                 <div class="activity-status-block js-activity-status hidden">
                    <div class="loading-animation"></div>
                    <div class="activity-status top offline"></div>
                </div>
            </button>
            <div class="dropdown body popup dropdown-content dropdown-arrow">

                <div class="account-dialog">
                    <div class="header">
                        <div class="account-avatar js-account-avatar"></div>
                        <div class="account-info">
                            <span class="name"></span>
                            <span class="email"></span>
                            <div class="activity-status-wrapper">
                                <div class="activity-status-block hidden js-activity-status">
                                    <div class="loading-animation"></div>
                                    <div class="activity-status top offline"></div>
                                </div>
                                <span class="activity-text">[$5926]</span>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <ul class="links">
                            <li class="no-red-dot">
                                <div class="status-dropdown">
                                    <button class="dropbtn">
                                        <span>[$24845]</span>
                                        <i class="sprite-fm-mono icon-arrow-right x1"></i>
                                    </button>
                                    <div class="dropdown-content">
                                        <div class="top-user-status-popup">
                                            <div class="dropdown-item mid-txt tick-item" data-presence="chat">
                                                <span class="activity-status online"></span>
                                                <span class="status-text">[$5923]</span>
                                            </div>
                                            <div class="dropdown-item mid-txt tick-item" data-presence="away">
                                                <span class="activity-status away"></span>
                                                <span class="status-text">[$5924]</span>
                                            </div>
                                            <div class="dropdown-item mid-txt tick-item" data-presence="dnd">
                                                <span class="activity-status busy"></span>
                                                <span class="status-text">[$5925]</span>
                                                <div class="activity-status-info">
                                                    [$19786]
                                                </div>
                                            </div>
                                            <div class="dropdown-item mid-txt tick-item active" data-presence="offline">
                                                <span class="activity-status offline"></span>
                                                <span class="status-text">[$5926]</span>
                                                <div class="activity-status-info">
                                                    [$19787]
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="no-red-dot"><button class="js-accountbtn js-fm-tab settings account">[$823]</button></li>
                            <li class="no-red-dot"><button class="js-accountbtn achievements">[$16117]</button></li>
                            <li class="no-red-dot"><button class="js-accountbtn downloadmega">[$1913]</button></li>
                            <li class="separator no-red-dot"></li>
                            <li class="no-red-dot">
                                <button class="js-accountbtn feedback highlight">[$join_survey_share_opinion]</button>
                            </li>
                            <li class="no-red-dot"><button class="js-accountbtn logout">[$967]</button></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <button class="btn-icon js-more-menu js-top-buttons">
            <i class="top-icon menu sprite-fm-mono icon-side-menu"></i> <div class="dark-tooltip top">[$169]</div>
        </button>
    </div>

    <!-- dropdown body popup dropdown-arrow top-login-popup sign hidden -->
    <div class="dropdown body popup dropdown-arrow top-login-popup sign hidden">
        <header>
            <div class="top-login-full"></div>
            <div class="clear"></div>
            <i class="top-login-full sprite-fm-mono icon-new-window"></i>
        </header>
        <div class="login">
            <form id="form_login_header"></form>
        </div>
        <div class="top-login-warning active">
            <div class="top-login-warning-arrow"></div>
            <div class="top-login-warning-close"></div>
            <div class="dropdown-inverted-arrow"></div>
            <div class="top-login-warning-close sprite-fm-mono icon-dialog-close"></div>
            <div class="top-login-warning-pad">
                <i class="top-login-warning-icon sprite-fm-uni icon-warning"></i>
                <div class="top-login-warning-txt">
                    [$1093]<br>
                </div>
                <div class="clear"></div>
                <div class="extension-advise"> [$1094] </div>
                <div class="top-login-warning-bott">
                    <div class="loginwarning-checkbox checkboxOff checkbox"></div>
                    <label class="radio-txt">[$229]</label>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="top-menu-popup o-hidden">
    <i class="sprite-fm-mono icon-dialog-close close"></i>
    <div class="top-menu-scroll">

        <div class="top-menu-content">
            <div class="top-menu-logged">
                <div class="top-menu-account-info">
                    <div class="avatar-block">
                        <div class="wrapper"></div>
                        <div class="activity-status-block js-activity-status">
                            <div class="loading-animation"></div>
                            <div class="activity-status top offline"></div>
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name"></div>
                        <div class="email"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="plan"></div>
                <div class="storage hidden">
                    <span></span>
                </div>
                <div class="loader sprite-fm-uni icon-loading"></div>
                <div class="storage-txt">
                </div>
                <button class="mega-button positive upgrade-your-account">
                    <span>[$433]</span>
                </button>
                <div class="top-menu-item underlined refresh-item">
                    <i class="sprite-fm-mono icon-clear-transfer refresh"></i>
                    <span>[$23433]</span>
                </div>
                <div class="top-menu-item account">
                    <i class="sprite-fm-mono icon-settings"></i>
                    <span>[$823]</span>
                </div>
                <div class="top-menu-item infinity-item hidden">
                    <i class="sprite-fm-mono icon-admin-outline"></i>
                    <span></span>
                </div>
            </div>

            <div class="top-menu-item login">
                <i class="sprite-fm-mono icon-login login"></i>
                <span>[$171]</span>
            </div>
            <div class="top-menu-item register">
                <i class="sprite-fm-mono icon-my-account register"></i>
                <span>[$968]</span>
            </div>

            <div class="top-menu-divider"></div>

            <div class="top-menu-item backup keybackup single small-font">
                <i class="sprite-fm-mono icon-key x32"></i>
                <span>[$8859]</span>
            </div>

            <div class="top-menu-divider hidden"></div>

            <!-- Products -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-features"></i>
                <span>[$footer_heading_products]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item storage">[$footer_item_cloud_storage]</div>
                <div class="top-menu-item objectstorage">[$footer_item_object_storage]</div>
                <div class="top-menu-item vpn">[$vpn]</div>
                <div class="top-menu-item pass">[$password_manager]</div>
                <div class="top-menu-item syncing">[$footer_item_sync]</div>
                <div class="top-menu-item megabackup">[$ft_backup_tab]</div>
                <div class="top-menu-item share">[$footer_item_share]</div>
                <div class="top-menu-item media-files">[$footer_item_media_files]</div>
                <div class="top-menu-item chatandmeetings">[$footer_item_chat_meetings]</div>
                <div class="top-menu-item business">[$19530]</div>
            </div>
            <!-- Solutions -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-lightbulb-small-regular-outline"></i>
                <span>[$footer_heading_solutions]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item individuals">[$footer_item_individuals]</div>
                <div class="top-menu-item freelancers">[$footer_item_freelancers]</div>
                <div class="top-menu-item small-business">[$footer_item_small_business]</div>
            </div>
            <!-- Platforms -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-platforms"></i>
                <span>[$23327]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item mobile">[$955]</div>
                <div class="top-menu-item desktop">[$1626]</div>
                <div class="top-menu-item extensions">[$16603]</div>
                <div class="top-menu-item cmd">[$footer_item_cmd]</div>
                <div class="top-menu-item nas">[$footer_item_cmd_for_nas]</div>
            </div>
            <!-- Plans -->
            <div class="top-menu-item submenu-item plans">
                <i class="sprite-fm-mono icon-plan"></i>
                <span>[$footer_heading_plans]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item pro">[$1361]</div>
                <div class="top-menu-item achievements">[$16117]</div>
            </div>
            <!-- Resources -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-developers"></i>
                <span>[$footer_heading_resources]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item blog blogarticle">[$389]</div>
                <div class="top-menu-item security">[$footer_item_security_privacy]</div>
                <div class="top-menu-item reliability">[$23064]</div>
                <div class="top-menu-item developers">[$392]</div>
            </div>
            <!-- Help -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-support"></i>
                <span>[$footer_heading_help]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item help">[$384]</div>
                <div class="top-menu-item contact">[$399]</div>
                <div class="top-menu-item bug-bounty">[$footer_item_bug_bounties]</div>
                <div class="top-menu-item support">[$383]</div>
            </div>
            <!-- Company -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-company"></i>
                <span>[$23328]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item about">[$396]</div>
                <div class="top-menu-item media">[$16645]</div>
            </div>
            <!-- Legal -->
            <div class="top-menu-item submenu-item">
                <i class="sprite-fm-mono icon-legal-policies"></i>
                <span>[$518]</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow"></i>
            </div>
            <div class="top-submenu">
                <div class="top-menu-item terms">[$385]</div>
                <div class="top-menu-item privacy">[$386]</div>
                <div class="top-menu-item copyright">[$387]</div>
                <div class="top-menu-item takedown">[$966]</div>
                <div class="top-menu-item transparency">[$22681]</div>
                <div class="top-menu-item cookie">[$24629]</div>
                <div class="top-menu-item cookies-settings">[$24644]</div>
                <div class="top-menu-item dispute">[$footer_item_dispute]</div>
            </div>

            <div class="top-menu-divider"></div>

            <div class="top-menu-item languages single">
                <i class="sprite-fm-mono icon-languages"></i>
                <span>English</span>
                <i class="sprite-fm-mono icon-arrow-right right-arrow down"></i>
            </div>
            <div class="top-menu-divider"></div>

            <div class="top-social-bl">
                <div class="top-social-txt"> [$follow_social_header] </div>
                <a href="https://www.facebook.com/MEGAprivacy" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="sprite-fm-uni icon-facebook"></i>
                </a>
                <a href="https://www.instagram.com/MEGA_privacy/" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="sprite-fm-uni icon-instagram"></i>
                </a>
                <a href="https://twitter.com/MEGAprivacy" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="sprite-fm-uni icon-twitter"></i>
                </a>
                <a href="https://www.linkedin.com/company/mega-the-privacy-company" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="sprite-fm-uni icon-linkedin"></i>
                </a>
                <a href="https://www.youtube.com/channel/UCL0n8SACU_eghsvHxbizKCA" target="_blank" rel="noopener noreferrer" class="top-social-button">
                    <i class="sprite-fm-uni icon-youtube"></i>
                </a>
            </div>
            <div class="top-menu-footer">
                <div class="top-mega-version"> v. dev </div>
                <button class="mega-button branded-red logout">
                    <span>[$967]</span>
                </button>
            </div>
        </div>
    </div>
</div>
<section class="corner-messages">
    <div class="alert-toast-container"></div>
    <div class="float-widget transfer-progress tpw hidden">
        <!-- add almost-overquota/overquota to banner -->
        <div class="banner transfer almost-overquota hidden">
            <button class="btn-icon close-over">
                <i class="sprite-fm-mono icon-close-component"></i>
            </button>
            <div class="left-section circle-dashboard">
                <div class="quota-info-pct-txt">97%</div>
                <div class="quota-info-pct-circle">
                    <div class="overlay"></div>
                    <ul>
                        <li class="nw-fm-chart0 right-c">
                            <p>
                                <span></span>
                            </p>
                        </li>
                        <li class="nw-fm-chart0 left-c">
                            <p>
                                <span></span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="quota-info-pr-txt">48 GB/50 GB</div>
            </div>
            <div class="right-section upgrade-block">
                <div class="head-title">[$20666]</div>
                <div class="content-txt">[$18085]</div>
                <!-- change button color to mega-button negative when it is overquota -->
                <button class="mega-button positive up-action">
                    <span>[$5549]</span>
                </button>
            </div>
        </div>
        <div class="transfer-progress-widget expand">
            <div class="transfer-progress-head">
                <div class="transfer-progress-type upload">
                    <div class="status-indicator">
                        <div class="progress-chart">
                            <div class="transfer-progress charts">
                                <div class="right-chart low-percent-clip">
                                    <span></span>
                                </div>
                                <div class="left-chart low-percent-clip">
                                    <span></span>
                                </div>
                            </div>
                            <i class="sprite-fm-mono icon-up"></i>
                        </div>
                    </div>
                    <div class="transfer-progress-txt">[$20808]</div>
                </div>
                <div class="transfer-progress-type download">
                    <div class="status-indicator">
                        <div class="progress-chart">
                            <div class="transfer-progress charts">
                                <div class="right-chart low-percent-clip">
                                    <span></span>
                                </div>
                                <div class="left-chart low-percent-clip">
                                    <span></span>
                                </div>
                            </div>
                            <i class="sprite-fm-mono icon-down"></i>
                        </div>
                    </div>
                    <div class="transfer-progress-txt">[$20808]</div>
                </div>
                <div class="transfer-progress-spacing"></div>
                <div class="transfer-control-panel">
                    <button class="btn-icon transfer-progress-icon tpw-c-e expand">
                        <i class="sprite-fm-mono icon-arrow-up"></i>
                    </button>
                    <button class="btn-icon transfer-progress-icon tpw-c-e collapse">
                        <i class="sprite-fm-mono icon-arrow-down"></i>
                    </button>
                    <button class="btn-icon transfer-progress-icon js-tpm-open">
                        <i class="sprite-fm-mono icon-expand-window"></i>
                    </button>
                    <button class="btn-icon transfer-progress-icon tpw-close close">
                        <i class="sprite-fm-mono icon-close-component"></i>
                    </button>
                </div>
            </div>
            <div class="transfer-progress-tabs-head">
                <div class="transfer-tabs-panel">
                    <button class="tab-lnk js-tab-active active">[$tfw_tab_active]</button>
                    <button class="tab-lnk js-tab-completed inactive">[$tfw_tab_completed]</button>
                </div>
            </div>
            <div class="widget-body-container active">
                <div class="transfer-progress-widget-body">

                </div>
            </div>
            <div class="transfer-widget-footer">
                <button class="mega-button action transfer-pause-icon">
                    <div>
                        <i class="sprite-fm-mono icon-pause"></i>
                    </div>
                    <span>[$6993]</span>
                </button>
                <button class="mega-button action transfer-clear-all-icon">
                    <div>
                        <i class="sprite-fm-mono icon-close-component"></i>
                    </div>
                    <span>[$6991]</span>
                </button>
            </div>
        </div>
    </div>
</section>
